<template>
    <ul class="mui-table-view">
				<!-- <li class="mui-table-view-cell mui-media" v-for="item in news" :key="item.id">
					<router-link to="'home/newslist/Newslnfo/'+item.id">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h1>{{item.title}}</h1>                             模拟后端传送过来的数据，但是没有后端
							<p class='mui-ellipsis'>                            只能用静态的方式显示假数据   
                                <span>{{item.add_time | dataFormat }}</span>//定义时间格式
                                <span>点击:{{item.click}}次</span>
                            </p> 
						</div>   
					</router-link>
				</li> --> 
                <li class="mui-table-view-cell mui-media" v-for="item in news" :key="item.id">
					<router-link :to="'/home/Newslnfo'+item.id"> 
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h1>{{item.title}}</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：{{item.add_time |dataFormat}}</span>
                                <span>点击:{{item.click}}次</span>
                            </p>                          
						</div>
					</router-link>
				</li>

			</ul>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
   data(){
       return {
           news:[
			   {id:1,title:'台风山竹',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:2,title:'英雄联盟专题',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:3,title:'习主席倒过来写',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:4,title:'理总李表示不服',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:5,title:'还有谁',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:6,title:'没有了',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:7,title:'台风山竹',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:8,title:'台风山竹',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:9,title:'台风山竹',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},
			   {id:10,title:'台风山竹',add_time: new Date,click:100,img_url:'/src/images/shuijiao.jpg'},

		   ]
       }
   },
   created() {
    //    newsList();     调用数据
   },
   methods:{
    //    newsList() {          运用vue-resource 获取后台的数据
    //        this.$http.get('/api/getnewslist').then(result =>{
    //            if(resule.body.status === 0){
    //                this.news = result.body.message 
    //            }else {
    //                Toast('获取新闻数据失败')
    //            }
    //        })
    //    }
   }
}


</script>

<style lang="scss" scoped>
.mui-table-view{
    li{
        h1{
            font-size: 14px;
        }
        .mui-ellipsis{
            font-size: 12px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }
        
    }
}

</style>
